/*  header-comment
/*  file   : /Users/allan/Desktop/workSpace/react-hrm-h5/src/components/ImagePicker/index
/*  author : arida
/*  date   : 2017-6-4 18:27:23
/*  last   : 2017-9-5 14:33:4
*/
import React, { Component } from "react";
import PropTypes from "prop-types";
import { ImagePicker, Modal } from "@ali/ding-ui";

import "./index.less";

function previewPhotoSecret(keys, index) {
  fetch(`/hrmregister/mobile/emp/getAccessURLByFileKeys`, {
    body: keys,
    meta: {
      dipId: "",
      silence: true
    }
  }).then(res => {
    if (res && res.success) {
      dd.biz.util.previewImage({
        urls: res.result,
        current: res.result[index || 0]
      });
    }
  });
}
class RLWImagePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      fs: [],
      index: 0
    };
  }

  onImagePreview = fs => {
    previewPhotoSecret(fs);
  };
  render() {
    const { value, onImageChange, multi, onChange, onClick } = this.props;
    const { show, fs } = this.state;
    let _files = [];

    if (multi) {
      _files = value.filter(q => !q.url);
    } else if (!value) {
      _files = [];
    } else {
      _files = [{ url: value }];
    }
    return (
      <div onClick={onClick}>
        {value ? (
          <ImagePicker
            files={_files}
            onChange={files => {
              if (multi) {
                onImageChange(files);
                onChange(files);
              } else {
                onImageChange("");
                onChange("");
              }
            }}
            selectable={multi}
            onImageClick={(index, fs) => this.onImagePreview(fs, index)}
          />
        ) : (
          <div />
        )}
        <Modal
          className="image-preview-modal"
          transparent={true}
          maskClosable={true}
          visible={show}
          style={{ width: "7.5rem !important" }}
          closable={true}
        >
          {fs.length !== 0 && (
            <img src={fs[this.state.index || 0].url} alt="" />
          )}
          {/* <div className="modal-cover"></div> */}
        </Modal>
      </div>
    );
  }
}

RLWImagePicker.defaultProps = {
  onImageChange: () => null,
  onChange: () => null,
  multi: false
};
RLWImagePicker.propTypes = {
  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
  onImageChange: PropTypes.func,
  onChange: PropTypes.func,
  multi: PropTypes.bool,
  onClick: PropTypes.func
};
module.exports = RLWImagePicker;
